IE 8 issue in li ul menu

[omerbutt]

hi all,
i have a menu based on <ul> and <li> it is working fine on mozilla all versions IE 6 and 7 all versions and google chrome ver 2.0.172.31 , the only problem is occuring is with the IE8 here is the link ,or you can see the attachment with of the screen grab.
HERE IS THE CODE FOR THAT MENU

.suckerdiv ul{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    margin-left: 0px;
    margin-right:0px;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
    padding-right:0px;
    padding-top:0px;
    padding-bottom:0px;
    list-style-type: none;
    width: 201px; /* Width of Menu Items */
    border-bottom: 1px solid #592442;
    background: #6F2F53;
}
 
.suckerdiv ul li{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    position: relative;
}
 
/*Sub level menu items */
.suckerdiv ul li ul{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    position: absolute;
    width: 150px; /*sub menu width*/
    top: 0;
    visibility: hidden;
}
 
/* Sub level menu links style */
.suckerdiv ul li a{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    display: block;
    overflow: auto; /*force hasLayout in IE7 */
    color: #FFFFFF;
    text-decoration: none;
    background: #6F2F53;
    padding: 3px 5px;
    border: 1px solid #592442;
    border-bottom: 0;
}
 
.suckerdiv ul li a:visited{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    color: #fff;
}
 
.suckerdiv ul li a:hover{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    background-color: #6F2F53;
    color: #FF0090;
}
 
.suckerdiv .subfolderstyle{
    font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
    text-align:left;
    padding-left:50px;
    background: url(../images/arrow.gif) no-repeat center left;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
 

var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
 
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
        if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
            ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
        else //else if this is a sub level submenu (ul)
          ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
        for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
        ultags[t].style.visibility="visible"
        ultags[t].style.display="none"
        }
  }
}
 
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
 

            <?
            function createMenu($parId){
                $q="select 
                    c.cat_id,
                    c.parent_id,
                    cd.cat_name
                from
                    ".CATEGORY." c,
                    ".CATEGORY_DESCRIPTION." cd
                where
                    (c.cat_id=cd.cat_id)
                and
                    (c.parent_id='$parId')";
                $r=execute($q);
                while($row_cat=mysql_fetch_array($r)){
                    $q_s="select c.cat_id, cd.cat_name from ".CATEGORY." c, ".CATEGORY_DESCRIPTION." cd where (c.cat_id=cd.cat_id) and c.parent_id='$row_cat[cat_id]'";
                    $r_s=execute($q_s);
                    $noRows=mysql_num_rows($r_s);
                    if($noRows > 0){?>
                        <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a>
                            <ul>
                                <li><? createMenu($row_cat['cat_id']);?></li>
                            </ul>
                        </li>
                    <? }else{?>
                        <li><a href="javascript:ProductList(<?=$row_cat['cat_id'];?>);" onclick=""><?=$row_cat['cat_name'];?></a></li><? 
                    }
                }//end while
            }?>
            <div class="suckerdiv">
                <ul id="suckertree1">
                <? createMenu(0);?>
                </ul>
            </div>
 

if any one can guide.
regards,
Omer Aslam

[Markus]

The problem being?

[omerbutt]

@Markus
kindly see the screen grab and the live site you will notice the error in the left menu the sub-categories menu is appearing under the main-category menu where as it should be hidden and should appear when we hover the main-category
reagrds,
OMer Aslam

[Markus]

First of all, validate your page (list of errors here)

Note: you have an error in your <meta http-equiv... charset=charset=utf-8> I think you can see the problem there.

[Dormilich]

just out of interest, why do you force Javascript on the Suckerfish menu? (except for IE, it usually works without Javascript)

[omerbutt]

@Markus
thanks markus good thing pointed out as i fixed all my pages i found out the error it was where i was creating the menu i was calling the creatmenu () inside the li instead of ul and there where the creatmenu () function was written it started with an li too so this is al fixed for IE 8 there was no javascript issue as dormilich was saying